<template>
  <div>
    <el-tabs v-if="getRole() === 'root'" v-model="goodType" type="card">
      <el-tab-pane
        v-for="item in goodTypeList"
        :key="item.id"
        :label="item.name"
        :name="item.id"
      />
    </el-tabs>
    <el-tabs v-model="tabName" type="card">
      <el-tab-pane
        v-for="item in tabList"
        :key="item.id"
        :label="item.name"
        :name="item.id"
      />
    </el-tabs>
    <div class="app-container" style="padding-top:0">
      <el-row>
        <el-col :span="5">
          <el-input
            v-model="searchStr"
            size="small"
            placeholder="订单号"
            class="input-with-select"
          >
            <el-button slot="append" icon="el-icon-search" />
          </el-input>
        </el-col>
        <el-col :span="4" :offset="1">
          <!-- <el-select
            style="display:inline-block;"
            size="small"
            v-model="supplier"
            placeholder="供应商"
          >
            <el-option
              v-for="item in supplierList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> -->
        </el-col>
        <el-col style="text-align:right;" :span="14">
          <el-date-picker
            v-model="timeRange"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            size="small"
          />
          <!-- <el-button style="margin-left:5px;" size="small" type="primary"
            >导出订单</el-button
          > -->
        </el-col>
      </el-row>
      <div class="cus-table" :style="{ height: tableHeight + 'px' }">
        <div class="header">
          <el-row>
            <el-col :span="8">
              <div class="header-cell">商品信息</div>
            </el-col>
            <el-col :span="2">
              <div class="header-cell">货号</div>
            </el-col>
            <el-col :span="2">
              <div class="header-cell">规格</div>
            </el-col>
            <el-col :span="2">
              <div class="header-cell" />
            </el-col>
            <el-col :span="3">
              <div class="header-cell">实付款</div>
            </el-col>
            <el-col :span="2">
              <div class="header-cell">支付方式</div>
            </el-col>
            <el-col :span="3">
              <div class="header-cell">收货人</div>
            </el-col>
            <el-col :span="2">
              <div class="header-cell">订单备注</div>
            </el-col>
            <el-col :span="2">
              <div class="header-cell">操作</div>
            </el-col>
          </el-row>
        </div>
        <div v-if="getRole() === 'root'">
          <div
            v-for="order in data"
            :key="order.id"
            style="border-bottom:1px solid #dfdfdf;"
          >
            <div class="cell-top">
              <div>
                订单号：{{ order.order_no }} 下单时间：{{ order.created_at }}
              </div>
              <div style="text-align:right">
                <el-button
                  style="margin-right:5px;"
                  size="mini"
                  @click="
                    detailVisible = true;
                    currentOrder = {
                      order_no: order.order_no,
                      status: order.status
                    };
                  "
                >订单详情</el-button>
              </div>
            </div>
            <div style="width:100%;overflow:hidden; display:flex;">
              <div style="width:50%;">
                <el-row
                  v-for="item in order.commodity"
                  style="height:80px;border-right:1px solid #dfdfdf;"
                >
                  <el-col style="height:80px;" :span="16">
                    <div class="small-cell" style="padding-right:5px;">
                      <div class="good-item">
                        <el-badge value="积分" class="item" :hidden="order.is_points === 0">
                          <img
                            style="height:50px; width:50px !important;"
                            :src="item.img"
                            alt=""
                          >
                        </el-badge>
                        <div style="width:calc(100% - 60px);">
                          <div
                            style="height:40px; line-height:20px; overflow:hidden;"
                          >
                            {{ item.name }}
                          </div>
                          <div style="line-height:40px;">
                            单价：￥{{ item.price }}
                          </div>
                        </div>
                        <div>×{{ item.number }}</div>
                      </div>
                    </div>
                  </el-col>
                  <el-col style="height:80px;" :span="4">
                    <div class="small-cell">{{ item.item_no }}</div>
                  </el-col>
                  <el-col style="height:80px;" :span="4">
                    <div style="text-align:center;" class="small-cell">
                      {{ item.spec }}
                    </div>
                  </el-col>
                  <!-- <el-col style="height:80px;" :span="4">
                    <div style="text-align:center;" class="small-cell">
                      供应商
                    </div>
                  </el-col> -->
                </el-row>
              </div>
              <div style="width:50%; display:flex; align-items:center;">
                <div style="width:25%">
                  <div
                    :style="{
                      'max-height': 80 * order.commodity.length + 'px',
                      'text-align': 'center'
                    }"
                    class="big-cell"
                  >
                    <div>￥{{ order.payment }}</div>
                    <!-- <div>【含运费￥{{ order.freight }}】</div> -->
                  </div>
                </div>
                <div style="width:16.66%">
                  <div style="text-align:center;" class="big-cell">
                    {{ payType(order.pay_type) }}
                  </div>
                </div>
                <div style="width:25%">
                  <div
                    class="big-cell"
                    :style="{
                      'max-height': 80 * order.commodity.length + 'px',
                      overflow: 'hidden'
                    }"
                  >
                    <el-popover
                      placement="top-start"
                      title="收货人"
                      width="200"
                      trigger="hover"
                      :content="
                        order.realname +
                          '/' +
                          order.mobile +
                          order.city_str +
                          ' ' +
                          order.detail +
                          ' 备注：' +
                          order.remark
                      "
                    >
                      <div slot="reference">
                        {{ order.realname + "/" + order.mobile }}
                        <div>{{ order.city_str + " " + order.detail }}</div>
                        <div>备注：{{ order.remark }}</div>
                      </div>
                    </el-popover>
                  </div>
                </div>
                <div style="width:16.67%">
                  <div
                    class="big-cell"
                    :style="{
                      'max-height': 80 * order.commodity.length + 'px',
                      overflow: 'hidden'
                    }"
                  >
                    <el-popover
                      placement="top-start"
                      title="备注详情"
                      width="200"
                      trigger="hover"
                      :content="order.admin_remark"
                    >
                      <div slot="reference">
                        {{ order.admin_remark }}
                      </div>
                    </el-popover>
                  </div>
                </div>
                <div style="width:15%">
                  <div class="big-cell" style="text-align:center;">
                    <el-button
                      size="small"
                      type="primary"
                      @click="
                        operateVisible = true;
                        currentOrder = {
                          order_no: order.order_no,
                          status: order.status,
                          commodity: order.commodity
                        };
                      "
                    >操作</el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else>
          <div
            v-for="order in data"
            :key="order.id"
            style="border-bottom:1px solid #dfdfdf;"
          >
            <div class="cell-top">
              <div>
                订单号：{{ order.order_no }} 下单时间：{{
                  order.created_at.date.split(".")[0]
                }}
              </div>
              <div style="text-align:right">
                <el-button
                  style="margin-right:5px;"
                  size="mini"
                  @click="
                    detailVisible = true;
                    currentOrder = {
                      order_no: order.order_no,
                      status: order.status
                    };
                  "
                >订单详情</el-button>
              </div>
            </div>
            <div style="width:100%;overflow:hidden; display:flex;">
              <div style="width:50%;">
                <el-row style="height:80px;border-right:1px solid #dfdfdf;">
                  <el-col style="height:80px;" :span="12">
                    <div class="small-cell" style="padding-right:5px;">
                      <div class="good-item">
                        <img
                          style="height:50px; width:50px !important;"
                          :src="order.img"
                          alt=""
                        >
                        <div style="width:calc(100% - 60px);">
                          <div
                            style="height:40px; line-height:20px; overflow:hidden;"
                          >
                            {{ order.name }}
                          </div>
                          <div style="line-height:40px;">
                            单价：￥{{ order.price }}
                          </div>
                        </div>
                        <div>×{{ order.number }}</div>
                      </div>
                    </div>
                  </el-col>
                  <el-col style="height:80px;" :span="4">
                    <div class="small-cell">{{ order.item_no }}</div>
                  </el-col>
                  <el-col style="height:80px;" :span="4">
                    <div style="text-align:center;" class="small-cell">
                      {{ order.spec }}
                    </div>
                  </el-col>
                  <el-col style="height:80px;" :span="4">
                    <div style="text-align:center;" class="small-cell" />
                  </el-col>
                </el-row>
              </div>
              <div style="width:50%; display:flex; align-items:center;">
                <div style="width:25%">
                  <div
                    :style="{
                      'max-height': 80 + 'px',
                      'text-align': 'center'
                    }"
                    class="big-cell"
                  >
                    <div>￥{{ order.payment }}</div>
                  </div>
                </div>
                <div style="width:41.66%">
                  <div
                    class="big-cell"
                    :style="{
                      'max-height': 80 + 'px',
                      overflow: 'hidden'
                    }"
                  >
                    <el-popover
                      placement="top-start"
                      title="收货人"
                      width="200"
                      trigger="hover"
                      :content="
                        order.realname +
                          '/' +
                          order.mobile +
                          ' 备注：' +
                          order.remark
                      "
                    >
                      <div slot="reference">
                        {{ order.realname + "/" + order.mobile }}
                        <div>
                          <el-cascader
                            expand-trigger="hover"
                            :options="cityList"
                            :value="[
                              order.province,
                              order.city,
                              order.prefecture
                            ]"
                            placeholder="未知"
                            :props="{
                              value: 'v',
                              label: 'n',
                              children: 'c'
                            }"
                            disabled
                            size="mini"
                            style="width:200px;"
                            @change=""
                          />
                        </div>
                        <div>备注：{{ order.remark }}</div>
                      </div>
                    </el-popover>
                  </div>
                </div>
                <div style="width:16.67%">
                  <div
                    class="big-cell"
                    :style="{
                      'max-height': 80 + 'px',
                      overflow: 'hidden'
                    }"
                  >
                    <el-popover
                      placement="top-start"
                      title="备注详情"
                      width="200"
                      trigger="hover"
                      :content="order.admin_remark"
                    >
                      <div slot="reference">
                        {{ order.admin_remark }}
                      </div>
                    </el-popover>
                  </div>
                </div>
                <div style="width:15%">
                  <div class="big-cell" style="text-align:center;">
                    <el-button
                      size="small"
                      type="primary"
                      @click="
                        operateVisible = true;
                        currentOrder = {
                          order_no: order.order_no,
                          status: order.status,
                          commodity: [{ is_serve: 1, ...order }]
                        };
                      "
                    >操作</el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="text-align:right;">
        <el-pagination
          :current-page.sync="page"
          :page-size="size"
          layout="total, prev, pager, next"
          :total="total"
          :background="true"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <order-detail
      :visible="detailVisible"
      :order-info="currentOrder"
      @close="
        detailVisible = false;
        getNormalOrderList(page, tabName);
      "
    />
    <order-operate
      :visible="operateVisible"
      :order-info="currentOrder"
      @close="
        operateVisible = false;
        getNormalOrderList(page, tabName);
      "
    />
  </div>
</template>

<script>
import city from '@/utils/citys.js'
import { getRole } from '@/utils/auth'
import { getAgentOrderList } from '@/api/agent-mng'
import { getNormalOrderList } from '@/api/order-mng'
import orderDetail from './component/order-detail'
import orderOperate from './component/order-operate'
export default {
  name: 'NormalOrder',
  components: {
    orderDetail,
    orderOperate
  },
  data() {
    return {
      getOrder: getRole() === 'root' ? getNormalOrderList : getAgentOrderList,
      goodTypeList: [
        {
          name: '商品订单',
          id: '0'
        },
        {
          name: '服务订单',
          id: '1'
        }
      ],
      tabList: [
        {
          name: '待发货',
          id: '2'
        },
        {
          name: '待付款',
          id: '0'
        },
        {
          name: '待收货',
          id: '3'
        },
        {
          name: '待评价',
          id: '4'
        },
        {
          name: '交易完成',
          id: '1'
        },
        {
          name: '交易关闭',
          id: '-3'
        }
      ],
      goodType: '1',
      tabName: '2',
      searchStr: '',
      supplier: '',
      supplierList: [],
      timeRange: [],
      page: 1,
      data: [],
      detailVisible: false,
      operateVisible: false,
      currentOrder: {},
      tableHeight: 600,
      total: 0,
      size: 0,
      cityList: city
    }
  },
  watch: {
    goodType: function(val) {
      this.getNormalOrderList(1, this.tabName)
    },
    tabName: function(val) {
      this.getNormalOrderList(1, val)
    },
    timeRange: function(val) {
      this.getNormalOrderList(1, this.tabName)
    }
  },
  mounted() {
    this.changeSize()
  },
  created() {
    this.getNormalOrderList(1, this.tabList[0].id)
  },
  methods: {
    getRole() {
      return getRole()
    },
    getNormalOrderList(page, type) {
      this.getOrder({
        page,
        status: type,
        order_no: this.searchStr ? this.searchStr : null,
        vip: 0,
        start_time:
          this.timeRange && this.timeRange.length ? this.timeRange[0] : null,
        end_time:
          this.timeRange && this.timeRange.length ? this.timeRange[1] : null,
        is_serve: this.goodType
      }).then(res => {
        if (res.code === 200) {
          this.data = res.data.data
          this.total = res.data.total
          this.page = res.data.current_page
          this.size = res.data.per_page
        }
      })
    },
    handleCurrentChange(page) {
      this.getNormalOrderList(page, this.tabName)
    },
    payType(type) {
      let text
      switch (type) {
        case 3:
          text = '支付宝'
          break
        case 1:
          text = '微信支付'
          break
        case 2:
          text = '余额支付'
          break
      }
      return text
    },
    changeSize() {
      this.tableHeight = document.body.clientHeight - 290
      window.onresize = () => {
        this.changeSize()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.cus-table {
  margin-top: 5px;
  border: 2px solid #dfdfdf;
  color: #444444;
  font-size: 12px;
  overflow: auto;
  .header {
    text-align: center;
    background: #efefef;
    height: 30px;
    line-height: 30px;
  }
  .cell-top {
    background-color: rgb(248, 248, 248);
    height: 30px;
    line-height: 30px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 10px;
  }
  .small-cell {
    width: 100%;
    height: 100%;
    line-height: 80px;
  }
  .big-cell {
    height: auto;
    padding: 5px 0;
    display: inline-block;
    vertical-align: middle;
    word-break: break-all;
    width: 100%;
  }
  .good-item {
    display: flex;
    img {
      margin-right: 5px;
      vertical-align: middle;
      margin-top: 15px;
      margin-left: 15px;
    }
  }
}
.el-badge{
  position: relative;
 /deep/ .el-badge__content{
    position: absolute;
    left: -36px;
    top: 15px;
    right: auto;
  }
}
</style>
